import { useReducer, useState,memo,useMemo, useCallback } from "react"

const MemoSon=memo(
  function Son({count}) {
    console.log('son组件重新渲染')
    return <div>son and count={count}</div>
  }
)
const MemoSon2=memo(
  function Son2({list}) {
    console.log('son2组件重新渲染')
    return <div>son2 and list={list}</div>
  }
)
const MemoSon3=memo(
  function Son3({funcFromFather}) {
    console.log('son3组件重新渲染')
    return <div>son3 and {funcFromFather()}</div>
  }
)
function ReactMemo() {
  console.log('父组件重新渲染')
  const [count,setConut]=useState(0)
  // const [list,setList]=useState(['a','b','c'])
  const list=useMemo(()=>{
    return ['a','b','c']
  },[])
  // const funcFromFather=useCallback(()=>{return 'func-From-Father'},[])
  const funcFromFather=useMemo(()=>{
    return ()=>{return 'func-From-Father'}
  },[])

  return(
    <div>
      count={count}
      <button onClick={()=>setConut(count+1)}>+</button>
      <MemoSon count={count}></MemoSon>
      <br />
      <MemoSon2 list={list}></MemoSon2>
      <br />
      <MemoSon3 funcFromFather={funcFromFather}></MemoSon3>
    </div>
  )
}

export default ReactMemo